<template>
  <div class="embed-wrapper">
    <!-- 头部气泡区，如果不需要可以删掉 -->
    <div class="bubbleContentHeader"></div>
    <!-- iframe 铺满整个容器 -->
    <iframe
      class="embed-iframe"
      :src="renderUrl"
      allow="camera *;microphone *;autoplay *;"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'SparkiePathEmbed',
  data() {
    return {
      APP_ID: '2c900331-906e-4567-afc8-e44922a8540a',
      APP_CODE: 'embedC7z2icFAbOuR6DO5k2jH'
    }
  },
  computed: {
    isMobile() {
      const ua = navigator.userAgent || navigator.vendor || window.opera
      return /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
        ua.toLowerCase()
      )
    },
    renderUrl() {
      const type = this.isMobile ? '' : 'full'
      return `https://wx.baeapps.com/api/ai_apaas/v1/web_embed/html?type=${type}&app_id=${this.APP_ID}&code=${this.APP_CODE}`
    }
  }
}
</script>

<style scoped>
.embed-wrapper {
  position: relative;
  width: 100%;
  /* 整个页面高度，如果是单页应用，可以用100vh */
  height: calc(100vh - 64px); /* 如果你页面有 header 高度 64px，就减掉它 */
  display: flex;
  flex-direction: column;
  background: #f3f5f9;
}

/* 如果你不需要这个头部标题栏可以隐藏 */
 .bubbleContentHeader { height: 0; }
/*
.bubbleContentHeader {
  padding: 16px;
  display: flex;
  justify-content: flex-end;
}
*/
.embed-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  /* object-fit 保证内容铺满且不变形 */
  object-fit: cover;
}
</style>